<template>
  <div class="update">
    <div class="left-box">
      <div class="title">
        最新更新
      </div>
      <div class="book-content">
        <el-table :data="bookList" style="font-size: 16px">
          <el-table-column :formatter="formatCategory" label="类别" prop="categoryName">
            <template #default="scope">
              <span class="category" @click="bookDetail(scope.row.id)">[{{ scope.row.categoryName }}]</span>
            </template>
          </el-table-column>
          <el-table-column label="书名" prop="bookName">
            <template #default="scope">
              <span class="bookName" @click="bookDetail(scope.row.id)">{{ scope.row.bookName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="最新章节" prop="lastChapterName">
            <template #default="scope">
              <span class="lastChapterName" @click="bookDetail(scope.row.id)">{{ scope.row.lastChapterName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="作者" prop="authorName">
            <template #default="scope">
              <span @click="bookDetail(scope.row.id)">{{ scope.row.authorName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="更新时间" prop="lastChapterUpdateTime">
            <template #default="scope">
              <span @click="bookDetail(scope.row.id)">{{ scope.row.lastChapterUpdateTime }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <Suspense>
      <BookRank :bookRanks="bookRanks">
        <template #title>
          更新榜单
        </template>
      </BookRank>
    </Suspense>
  </div>
</template>
<script lang="ts" setup>
import {onMounted, reactive, ref, toRefs} from "vue";
import {listUpdateRankBooks} from "@/api/book";
import {useRoute, useRouter} from "vue-router";
import BookRank from "@/components/home/RankSlot.vue";

const route = useRoute();
const router = useRouter();
const state = reactive({
  bookRanks: [],
  bookList: [],
  // imgBaseUrl: process.env.VUE_APP_BASE_IMG_URL,
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL,
});
const {bookRanks, bookList, imgBaseUrl} = toRefs(state)
onMounted(async () => {
  const {data} = await listUpdateRankBooks();
  state.bookList = data;
  await data.forEach((book: any) => {
    if (state.bookRanks.length < 10) {
      state.bookRanks.push(book);
    }
  });
});

function formatCategory(row: any) {
  return `[${row.categoryName}]`;
}

const bookDetail = (bookId) => {
  router.push({path: `/book/${bookId}`});
};


</script>


<style lang="scss" scoped>
.update {
  width: 60%;
  margin: 0 auto;
  padding: 10px;
  background-color: #FFFFFF;
  margin-top: 20px;
  box-sizing: border-box;
  display: flex;

  .left-box {
    box-sizing: border-box;
    //border: 1px solid #000;
    padding: 10px;
    flex: 3;

    .title {
      font-size: 28px;
      font-weight: bold;
      color: #333;
      text-align: left;
      border-bottom: 1px solid #ddd;
      margin-bottom: 30px;
      padding-bottom: 20px;
    }

    .book-content {
      //border: 1px solid #000;
      .category, .bookName, .lastChapterName {
        &:hover {
          cursor: pointer;
          color: #fc7403;
        }
      }
    }
  }

  .right-box {
    box-sizing: border-box;
    flex: 1;
  }
}
</style>